<template>
	<view class="footprint">
		<view class="tab-view">
			<u-tabs :list="list" active-color="#141414" height="100" bar-width="24" font-size="28" :bold="true" inactive-color="#757575"
			 :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="footprint-content">
			<view class="footprint-list">

				<view class="footprint-item" v-for="(item,index) in footprintList" :key="item.collect_id" @click="goGoodsDetails(footprintList[index].goods_id)">
					<image class="goods-img" :src="item.image_middle" mode=""></image>
					<view class="text-info">
						<view class="goods-name">{{item.goods_name}}</view>
						<view class="price"><text>¥</text>{{item.retail_price}}</view>
						<view class="clik">人气{{item.click}}</view>
					</view>
				</view>

			</view>
			<pt-nothing
				text="暂无足迹" 
				:fixed="true" 
				v-if="footprintList.length == 0"
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
			</pt-nothing>
			
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="show" />
		</view>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadMore: true,
				show: false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				page: 0,
				list: [{
					name: '总部商品',
					value: 1,
				}, {
					name: '套餐',
					value: 3,
				}],
				current: 0,
				footprintList: [],
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				let data = {
					page: this.page,
					limit: 10,
					status: this.list[this.current].value,
					paramter: 1
				}

				this.$u.api.MyBrowse(data).then(res => {
					if (res.datas.list.length != 0) {
						res.datas.list.forEach((item) => {
							this.footprintList.push(item)
						})
						this.show = true
						this.loadMore = true
					} else {
						this.loadMore = false
					}
				})
			},
			change(index) {
				this.current = index;
				this.page = 0
				this.show = false
				this.loadMore = true
				this.footprintList = []
				this.init()
			},
			// 去商品详情或者套餐详情
			goGoodsDetails(id) {
				if (this.current == 0) {
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/product-info/product-info?goods_id=' + id
					})
				} else if (this.current == 1) {
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/product-info/product-info?goods_id=' + id + '&isMerchant=true'
					})
				} else if (this.current == 2) {
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/package/n98-info?group_id=' + id
					})
				}
			},
		},
		onReachBottom() {
			if (!this.loadMore) return;
			this.status = 'loading';
			this.page++
			this.init()
			setTimeout(() => {
				this.status = 'nomore';
			}, 1000)
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			this.page = 0
			this.show = false
			this.loadMore = true
			this.footprintList = []
			this.init()
		}
	}
</script>

<style lang="scss">
	.footprint {
		.tab-view {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			border-bottom: solid 2rpx #EEE;
		}

		.footprint-list {
			padding-top: 100rpx;

			.footprint-item {
				padding: 30rpx 30rpx;
				display: flex;

				.goods-img {
					display: block;
					width: 220rpx;
					height: 220rpx;
					border-radius: 8rpx;
				}

				.text-info {
					flex: 1;
					padding-left: 30rpx;

					.goods-name {
						font-size: 28rpx;
						color: #2F2F2F;
						overflow: hidden;
						text-overflow: ellipsis;
						display: flex;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.price {
						margin-top: 40rpx;
						font-size: 26rpx;
						font-weight: bold;
						color: #141414;

						text {
							font-size: 20rpx;
						}
					}

					.clik {
						margin-top: 30rpx;
						font-size: 22rpx;
						color: #9E9E9E;
					}
				}

			}
		}
	}
</style>
